(function(window, $) {


    //适配列表标题
    setTimeout(function(){
        $('.blog-header .title h2').width($('.blog-header').width() - $('.blog-header .pic').width() - 8);
    }, 3000);

    //适配banner
    var bannerHeight = $('.banner').width() * 416 / 2272;
    $('.banner-wrapper').height(bannerHeight);
    $('.banner').height(bannerHeight);
    $('.banner h1').css('line-height', bannerHeight + 'px');



    var page = 1;   //请求第几页
    var locked = false;  //控制滚动锁,防止滚动多次触发

    //首先加载第一页的数据:

    $.getJSON('/blog/getList', {'page': page}, getListHandler);

    function getListHandler(json) {
        // console.log(json);

        for (var i = 0; i < json.data.length; i++) {
            renderList(json.data[i]);
        }

        $('.spinner').remove();
        page++;

        if (json.remainPage == 0) {
            $(window).off('scroll', scrollHandler);
            $('.spinner').remove();
        }
    }




    //滚动刷新
    $(window).on('scroll', scrollHandler);

    function scrollHandler() {
        var scrollTop = $('body').scrollTop();
        var clientHeight = window.innerHeight - $('#navbar').height();
        var offsetHeight = $('body').height();

        if (scrollTop + clientHeight >= offsetHeight) {

            if (!locked) {
                var spinHtml = '<div class="spinner" style="text-align: center;"><i style="font-size: 24px; color: #168eff" class="icon-spinner icon-spin"></i></div>';
                $('.blog-list').append(spinHtml);
                locked = true;


                $.getJSON('/blog/getList',{'page': page}, getListHandler);
            }

        }
    }

    function renderList(data) {

        var toData = {
            '_id': data['_id'],
            classify: renderClassify(data.classify),
            commentLen: data.comments.length,
            content: renderContent(data.content),
            date: formatDate(data.date),
            loved: data.loved,
            title: data.title,
            visited: data.visited,
            usericon: data.usericon,
            username: data.username,
            userdep: data.userdep,
            uid: data.uid
        };
        // console.log(toData);

        var liHtml = '<li>' +
                    '<header class="blog-header">' +
                    '<div class="pic"><a href="/blog/user/{{uid}}"><img width="64" src="/dist/img/icon/{{usericon}}" alt=""></a></div>' +
                    '<div class="title">' +
                    '<a href="/blog/article/{{_id}}"><h2>{{title}}</h2></a>' +
                    '<p>' +
                    '<span>{{userdep}} {{username}}</span>' +
                    '<span>{{date}}</span>' +
                    '<span>{{classify}}</span>' +
                    '<span class="hidden-xs"><i class="eux-icon eux-icon-eye"></i>{{visited}}</span>' +
                    '<span class="hidden-xs"><i class="eux-icon eux-icon-comment"></i>{{commentLen}}</span>' +
                    '<span class="hidden-xs"><i class="eux-icon eux-icon-good"></i>{{loved}}</span>' +
                    '</p>' +
                    '</div>' +
                    '</header>' +
                    '<p class="abstract">{{content}}</p>' +
                    '<div class="detail"><a href="/blog/article/{{_id}}">阅读全文</a></div>' +
                    '</li>';


        //模版简单解析替换
        for (var key in toData) {
            var template = new RegExp('\{\{' + key + '\}\}', 'g');
            liHtml = liHtml.replace(template, toData[key]);
        }
        $('.blog-list').append(liHtml);

        locked = false;

    }

    function renderClassify(classify) {
        switch(classify) {
            case 0: return '前端开发';
            case 1: return '视觉设计';
            case 2: return '交互设计';
            case 3: return '后端开发';
            case 4: return 'APP开发';
            case 8: return '其它';
            default: return '未知类别';
        }
    }

    function renderContent(content) {
        //去除HTML标签
        content = content.replace(/<[^>]*>/g,"").trim();
        //去除img标签
        content = content.replace(/<img[^<]*/g,"").trim();
        //小屏幕返回64个字
        if (window.innerWidth < 768) {
            if (content.length > 64){
                return content.substr(0, 64) + '...';
            }
        }
        if (content.length > 132) {
            return content.substr(0, 132) + '...';
        }
        return content;
    }

    function formatDate(date) {
        // console.log(moment(date).format('YYYY/MM/DD'));
        return moment(date).format('YYYY/MM/DD');
    }

})(window, $);